import { useReducer } from "react";
import "./App.css";

function queryData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(666)
        }, 2000)
    })
}

function App() {
    /* 
      useReducer
    */
    function reducer (state, action) {
        // 这里的state拿到的是当前状态
        if (action.type === 'increment_age') {
            return {
                age: state.age + 1
            }
        }
        throw new Error('抛出错误')
    }
    // item是状态，dispatch允许更新状态并触发重新渲染
    // {age: 23是初始状态}
    const [item, dispatch] = useReducer(reducer, {age: 23})
    return (
        <>
        <div className="card">
            <div onClick={() => dispatch({type: 'increment_age'})}>增加年龄</div>
            {/* 注意是item.age，不是直接渲染age */}
            <div>Hello, your age is {item.age}</div>
        </div>
        </>
    );
}

export default App;
